<template>
    <el-carousel-item class="msg-body">
      <div class="item-body">
        <el-text :type="type">{{props.itype}}</el-text>
        {{props.msgInfo}}
      </div>
      <div class="item-footer">
        <span>{{props.startTime + '-' + props.endTime}}</span>
      </div>
    </el-carousel-item>
</template>

<script setup lang="ts">
import {computed} from "vue";
import { MsgCarouselItemType } from "./index";

// interface MsgCarouselItemType{
//   seq:string|number;
//   startTime:string;
//   endTime:string;
//   itype:string;
//   msgInfo:string;
// }

const props = withDefaults(defineProps<MsgCarouselItemType>(),{
  seq:"",
  startTime:"",
  endTime:"",
  itype:"提示",
  msgInfo:""
});

const type = computed(() => {
  if (props.itype == '警告'){
    return 'warning';
  }else if (props.itype == '事故'){
    return 'error';
  }else {
    return 'primary';
  }
})

</script>
<style scoped>
.item-body{
  white-space: pre-wrap;
}
.item-body{
  height: 90%;
  color: #555;
}
.item-footer{
  position: absolute;
  left: 0;
  bottom: 0;
}

</style>